<template>
	<view class="container-warp">
		<view class="p20">
			<view class="search-box">
				<image src="../../static/logs/search-icon.png" mode="" @click="search"></image>
				<u-input v-model="searchValue" placeholder='输入客户、网点、创建人名称' type="text" @input='search' />
			</view>
		</view>

		<view class="search-tab">
			<view class="select-tab" v-for="(item,index) in selectTabList" :key="item.value">
				<view class="tab-item" @click="tabSearch(index,item)" :class="tabIndex==index?'active':''">
					{{item.label}}
					<view class="search-tab-line" :class="tabIndex==index?'lineActive':''"></view>
				</view>
			</view>
		</view>
		<view class="p20">
			<view class="search-radio">
				<u-radio-group v-model="radio">
					<u-radio @change="checkboxGroupChange" v-for="(item, index) in list" :key="index"
						:name="item.value">{{item.name}}</u-radio>
				</u-radio-group>
			</view>

			<scroll-view scroll-y="true" class="scroll-list" @scrolltolower="scrolltolower">
				<view>
					<view class="list-item" v-for="item in dataList" :key="item.id" @click="editCostomer(item)">
						<view class="header-box p30">
							<view class="title-box">
								<text class="title-name">{{item.customerName}}({{item.merchantCode}})</text>
							</view>
							<view class="list-state">
								<text v-if="item.status==0">新建</text>
								<text v-if="item.status==1" style="color: #FAAD14;">洽谈中</text>
								<text v-if="item.status==2" style="color: #CDCDCD;">关闭</text>
							</view>
						</view>
						<view class="list-line">

						</view>
						<view class="content-box p30">
							<view class="info-item">
								<text class="info-label">网点名称</text> <text>：</text> <text
									class="info-value">{{item.marketName}}</text>
							</view>
							<view class="info-item">
								<text class="info-label">电话</text><text>：</text> <text
									class="info-value">{{item.hiddenPhoneNumber}}</text>
								<image src="../../static/logs/call-icon.png" mode="" class="call-icon"
									@click.stop="callPhone(item.customerPhone)"></image>
							</view>
							<view class="info-item">
								<text class="info-label">行业背景</text><text>：</text> <text class="info-value"
									v-if="item.industry==1">家居建材</text>
								<text class="info-value" v-if="item.industry==0">非家居建材</text>
							</view>
							<view class="info-item">
								<text class="info-label">创 建 人</text><text>：</text> <text class="info-value">
									{{item.custName}}</text>
							</view>
							<view class="info-item">
								<text class="info-label">创建时间</text><text>：</text> <text
									class="info-value">{{item.createTime.slice(0,10)}}</text>
							</view>
							<view class="info-item" v-if="item.status==2">
								<text class="info-label">关闭时间</text><text>：</text> <text
									class="info-value">{{item.updateTime.slice(0,10)}}</text>
							</view>


						</view>
						<view class="look-log-box">
							<view class="look-log" @click.stop="addLog(item)" v-if="item.status!=2">
								日志跟进
							</view>
							<view class="look-log" v-if="item.logCount>0" @click.stop="lookLog(item)">
								查看日志
							</view>
						</view>

					</view>
				</view>
			</scroll-view>


		</view>
		<view class="add-btn-wrap">
			<view class="add-btn" @click="newAdd">
				新建
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getDotList,
		getDotNumList
	} from '@/common/service.js'
	export default {
		data() {
			return {
				searchValue: '',
				// selectTabList: ['全部(90)', '新建(3)', '洽谈中(2)', '关闭(5)'],
				selectTabList: [{
						label: '全部',
						value: '',
					}, {
						label: '新建(3)',
						value: '0',
					}, {
						label: '洽谈中(2)',
						value: '1',
					}, {
						label: '关闭(5)',
						value: '2',
					},

				],
				dataList: [],
				tabIndex: 0,
				list: [{
						name: '看自己',
						value: this.CONFIG.user.id,
					},
					{
						name: '看全部',
						value: '',
					},

				],
				pageNum: 1,
				pageSize: 10,
				status: '',
				radio: this.CONFIG.user.id
			};
		},
		onLoad() {
			this.getNumList()
			this.getList()
			uni.$on('getList', () => {
				this.radio = this.CONFIG.user.id
				this.status = ''
				this.searchValue = ''
				this.init()
			})
		},
		methods: {
			addLog(item) {
				uni.setStorageSync('logItem', item)
				uni.navigateTo({
					url: '/pages/logFollowList/addFollow'
				})
			},
			lookLog(item) {
				uni.navigateTo({
					url: './followDetail?merchantCode=' + item.merchantCode
				})
			},
			editCostomer(item) {
				if (item.status == 0) {
					uni.setStorageSync('dotItem', item)

					uni.navigateTo({
						url: './editQuotient'
					})
				} else {
					uni.navigateTo({
						url: './quotientDetail?id=' + item.id
					})
				}

			},
			init() {
				this.dataList = []
				this.pageNum = 1
				this.pageSize = 10
				this.getNumList()
				this.getList()
			},
			search() {
				this.init()
			},
			checkboxGroupChange(e) {
				this.init()
			},
			scrolltolower() {
				this.pageNum++
				this.getList()
			},
			getNumList() {
				let data = {
					keyWord: this.searchValue,
					custId: this.radio,
				}
				getDotNumList(data,
					(res) => {
						console.log(res, 9999999);
						let data = res.data.data
						this.selectTabList[0].label = `全部(${data.allCount})`
						this.selectTabList[1].label = `新建(${data.newCount})`
						this.selectTabList[2].label = `洽谈中(${data.negotiationCount})`
						this.selectTabList[3].label = `关闭(${data.closeCount})`
					}, (e) => {
						this.$refs.uToast.show({
							title: e,
							type: "error",
							duration: 3000,
						});
					}
				)
			},
			hiddenPhoneNumber(phone) {
				// 提取手机号的前三位和后四位
				const prefix = phone.slice(0, 3);
				const suffix = phone.slice(-4);
				// 拼接隐藏中间四位的手机号
				return `${prefix}****${suffix}`;
			},
			getList() {
				let data = {
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					keyWord: this.searchValue,
					custId: this.radio,
					status: this.status
				}
				getDotList(data,
					(res) => {
						let list = res.data.rows
						console.log(list);
						this.dataList = this.dataList.concat(list)
						console.log(this.dataList);
						this.dataList.map(item => {
							item.hiddenPhoneNumber = this.hiddenPhoneNumber(item.customerPhone)
							// console.log(item.hiddenPhoneNumber);

						})
					}, (e) => {
						this.$refs.uToast.show({
							title: e,
							type: "error",
							duration: 3000,
						});
					}
				)
			},
			newAdd() {
				uni.setStorageSync('dotItem', '')
				uni.navigateTo({
					url: './addQuotient'
				})
			},
			tabSearch(index, item) {
				this.dataList = []
				this.pageNum = 1
				this.pageSize = 10
				this.tabIndex = index
				this.status = item.value
				this.getList()
			},
			callPhone(tel) {
				uni.makePhoneCall({
					phoneNumber: tel
				})
			},

		}
	}
</script>

<style lang="scss" scoped>
	.p20 {
		padding: 20rpx;
	}

	.look-log-box {
		display: flex;
		justify-content: flex-end;
	}

	.container-warp {
		box-sizing: border-box;
		width: 100vw;
		min-height: 100vh;
		background-color: #F3F5F7;

		.search-box {
			width: 100%;
			height: 80rpx;
			background-color: #fff;
			border-radius: 40rpx;
			display: flex;
			align-items: center;
			padding: 0 20rpx;
			box-sizing: border-box;

			image {
				width: 32rpx;
				height: 32rpx;
				margin-right: 20rpx;
			}
		}

		.search-tab {
			width: 100%;
			height: 100rpx;
			background: #fff;
			display: flex;
			align-items: center;
			justify-content: space-around;
			font-size: 30rpx;
			color: #666;

			.tab-item {
				text-align: center;
			}

			.search-tab-line {
				width: 30rpx;
				height: 5rpx;
				border-radius: 3rpx;
				background-color: #fff;
				margin: 0 auto;
				margin-top: 10rpx;
			}

			.active {
				color: #007AFF;
				font-weight: 600;
			}

			.lineActive {
				background: #007AFF;
			}
		}
		.p30{
			padding: 0 30rpx;
		}
		.scroll-list {
			width: 100%;
			height: calc(100vh - 446rpx);

			// background-color: #ccc;
			.list-item {
				position: relative;
				width: 100%;
				padding: 30rpx 0;
				background-color: #fff;
				border-radius: 16rpx;
				margin-top: 20rpx;

				.list-line {
					width: 100%;
					height: 1px;
					background-color: #F7F7F7;
					margin-top: 27rpx;
				}

				.header-box {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.title-box {
						display: flex;
						align-items: center;

						image {
							width: 60rpx;
							height: 60rpx;
							border-radius: 50%;
						}

						.title-name {
							font-size: 32rpx;
							font-weight: 600;
							color: #000;

						}
					}

					.list-state {
						color: #007AFF;
						font-weight: 600;
					}
				}

				.content-box {
					margin-top: 20rpx;

					.info-item {
						font-size: 30rpx;
						color: #999;
						display: flex;
						align-items: center;
					}

					.info-label {
						width: 140rpx;
						display: inline-block;
						text-align-last: justify;
					}

					.call-icon {
						width: 36rpx;
						height: 36rpx;
						display: inline-block;
						margin-left: 20rpx;
					}

					.info-value {
						color: #333;
					}
				}
			}

			.look-log {
				width: 200rpx;
				height: 66rpx;
				background-color: #F6F6F6;
				border-radius: 36rpx;
				display: flex;
				align-items: center;
				color: #307DCD;
				font-size: 30rpx;
				justify-content: center;
				margin-top: 20rpx;
				margin-right: 20rpx;
				// position: relative;
				// bottom: 30rpx;
				// right: 20rpx;
			}
		}

		.add-btn-wrap {
			width: 100%;
			height: 130rpx;
			background-color: #fff;
			padding-top: 15rpx;

			.add-btn {
				width: 690rpx;
				height: 90rpx;
				border-radius: 54rpx;
				background-color: #307DCD;
				color: #fff;
				display: flex;
				justify-content: center;
				align-items: center;
				margin: 0 auto;

			}
		}
	}

	/deep/.u-checkbox__icon-wrap {
		border: 1px solid #007AFF;
		background-color: #fff;
	}
</style>